<template>
  <div>
    <h1>{{username}}</h1>
    <button @click="send">子传父</button>
    <slot name="footer"></slot>
    <h1>{{msgref}}</h1>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import $bus from "../utils/bus";
export default defineComponent({
  props: {
    username: {
      //父传子
      type: String,
    },
    age: {
      type: Number,
    },
  },
  // vue3 新增 声明子传父事件
  emits: {
    sendmsg: null,
  },
  setup(props, context) {
    // ref后 可以传递泛型
    let cc = ref<string>("你好");
    let msgref = ref<string>("");
    // 接收兄弟传参
    $bus.on("sendmsg", (a) => {
      console.log(a); //a 是接收到数据
      msgref.value = a as string; //类型断言
    });
    console.log(context);
    // setup props 就是父传子的数据
    let list: Array<any> = ["诸葛亮", "孙尚香", "达摩", "金蝉"];
    //在setup中使用 子传父的数据是
    console.log(props.username);
    //context 下的参数有
    // emit 子传父 触发自定义事件的
    // attrs 所有父组件中的属性  attrs vue封装不可少
    // attrs 除props声明以外的属性
    // slots 所有的插槽
    console.log(context.attrs);
    console.log(context.attrs.nba);
    // 获取所有插槽
    console.log(context.slots);
    //
    let send = () => {
      //子传父
      context.emit("sendmsg", list);
    };
    return {
      send,
      msgref,
    };
  },
});
</script>
<style lang="less">
</style>

     